<template>
    <el-menu text-color="#aaadb2" class="menu-bar" :default-active="$route.path" :collapse="isCollapse" 
	:collapse-transition = "false" unique-opened>
        <menu-item :menuList='menuList'></menu-item>
    </el-menu>
</template>

<script>
import MenuItem from '../components/MenuItem'
import {mapState} from 'vuex'
export default {
    name: "MenuBar",
    computed:{
      ...mapState({
        // 获取vuex中的菜单数据
        menuList: state => state.MenuStore.menu_data,
        // 获取vuex中的isCollapse属性
        isCollapse: state => state.MenuStore.isCollapse
      })
    },
    components: {MenuItem}
};
</script>

<style lang="less" scoped>
.el-aside {
    border-right: none;
    // 侧边栏折叠动画速度
    transition: width 0.15s;
    -webkit-transition: width 0.15s;
    -moz-transition: width 0.15s;
    -o-transition: width 0.15s;
}
</style>
